<!--头部公共部分-->
{include file="common/header" /}

<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">咨询</a>
        <a>
          <cite>已签约客户</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="float:right" href="javascript:location.replace(location.href);"
       title="刷新">
        <i class="layui-icon layui-icon-refresh"></i></a>
</div>
<div class="x-body">
    <div class="layui-row"
         style="padding-left:20px;border-left:1px solid #e5e5e5;padding-top:20px;border-right:1px solid #e5e5e5;">
        <div class="layui-form layui-col-md12 x-so layui-form-pane">
            <div class="layui-input-inline">
                <input type="text" name="phone" placeholder="电话号码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="contract_number" placeholder="签单编号" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" data-type="reload" id="search">筛选</button>
                <button class="layui-btn layui-btn-danger" id="clear">重置</button>
            </div>
        </div>
    </div>
    <table class="layui-table" id="datalist" lay-filter="Event"></table>
</div>
    <script type="text/html" id="barTable">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">修改订单</a>
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="continue">续约订单</a>
    </script>
<!--底部公共部分-->
{include file="common/footer" /}
<script>
        layui.use(['table', 'element', 'laydate', 'layer'], function () {
            var table = layui.table,
                laydate = layui.laydate,
                element = layui.element,
                layer = layui.layer,
                $ = layui.$;

            //日期
            laydate.render({
                elem: '#start',
                type: 'date'
                ,trigger: 'click'
            });

            //方法级渲染
            var tableIns = table.render({
                elem: '#datalist',
                url: '{:url("customer/consultor")}',
                method: 'POST',
                cols: [[
                    {field: 'id', title: 'ID', width: 100, sort: true, fixed: false, align: 'center'},
                    {field: 'name', title: '客户姓名', width: 90, align: 'center'},
                    {field: 'phone', title: '联系方式', width: 120, align: 'center'},
                    {field: 'channel', title: '来源渠道', width: 90, align: 'center'},
                    {field: 'contract_number', title: '签单编号', width: 110, align: 'center'},
                    {field: 'signing_date', title: '签单日期', width: 110, align: 'center'},
                    {field: 'total_amount', title: '签单金额', width: 90, align: 'center'},
                    {field: 'amount', title: '已收款', width: 90, align: 'center'},
                    {field: 'student_name', title: '学员姓名', width: 90, align: 'center'},
                    {field: 'grade', title: '学员年级', width: 90, align: 'center'},
                    // {field: 'study_tube_teacher', title: '学管师', width: 90, align: 'center'},
                    {field: 'contract_type', title: '签单类型', width: 90, align: 'center'},
                    {title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#barTable'},
                ]],
                limit: 5,
                page: true,
                height: 'full-190',
                done: function (res, curr, count) {
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                }
            });

            //监听工具条
            table.on('tool(Event)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'edit') {
                    var url = '{:url("contract/edit")}?contract_number=' + data.contract_number;
                    location.href = url;
                } else if (layEvent === 'continue') {
                    layer.msg('待开发中···', {time: 2000});
                }
            });
            //搜索项
            $('#search').click(function () {
                var field = {};
                field.phone = $('input[name=phone]').val();
                field.contract_number = $('input[name=contract_number]').val();
                console.log(field);
                tableIns.reload({
                    where: field,
                    method: 'POST',
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            });
            //清除
            $('#clear').click(function () {
                $('.layui-form-pane').find('.layui-input-inline').each(function (index, element) {
                    $(element).find('input[type=text]').val('');
                    $(element).find('select').val('');
                })
                tableIns.reload({
                    where: {
                        'contract_number': '',
                        'phone': '',
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            });
        });
    </script>
    <script>var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();</script>
